var ws;
var connectTimeout = 5000000000;

// 连接WebSocket服务器
function connect() {
    ws = new WebSocket("ws://" + window.location.host + "/websocket"); // WebSocket连接路径修改为/upload

    // 设置连接超时处理
    var connectTimer = setTimeout(function() {
        ws.close();
        console.log('WebSocket 连接超时!');
    }, connectTimeout);

    // 当连接成功建立时
    ws.onopen = function () {
        clearTimeout(connectTimer); // 清除连接超时定时器
        console.log('WebSocket 连接已打开');
    };

    // 当接收到消息时，显示消息
    ws.onmessage = function (event) {
        var message = JSON.parse(event.data);
        if (message.data) {
            // 如果是图片消息，调用不同的处理方法
            displayImageMessage(message);
        } else {
            displayTextMessage(message);
        }
    };

    // WebSocket关闭时的处理函数
    ws.onclose = function (event) {
        console.log('WebSocket 关闭!');
    };

    // WebSocket出错时的处理函数
    ws.onerror = function (error) {
        console.log('WebSocket Error: ' + error);
    };
}

// 发送消息
function sendMessage() {
    var messageInput = document.getElementById("message-input");
    var message = messageInput.value.trim();
    if (message === "") {
        alert("消息内容不能为空！");
        return false; // 阻止表单提交
    }
    ws.send(JSON.stringify({sender: sender, receiver: receiver, message_content: message})); // 发送消息
    displayTextMessage({sender: sender, receiver: receiver, message_content: message}); // 显示自己发送的消息
    messageInput.value = ''; // 清空输入框
}

// 当文件输入框内容发生变化时，执行上传操作
var fileInput = document.getElementById('image-input');
fileInput.onchange = function () {
    uploadImage();
};


function onSubmitForm() {
    sendMessage(); // 在这里调用发送消息的函数，或者你想要执行的其他逻辑
    return false; // 阻止表单默认提交行为
}
// 上传图片
function uploadImage() {
    var fileInput = document.getElementById('image-input');
    var file = fileInput.files[0];
    if (!file) {
        alert('请选择图片文件');
        return;
    }

    // 获取当前文件名
    // 确认用户是否想要添加新文件
    var addNewFile = confirm("是否添加新文件？");
    if (addNewFile) {
        var formData = new FormData();
        formData.append('image', file);
        formData.append('addNewFile', addNewFile); // 将用户选择的值添加到 FormData 中

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true); // 或者相对路径 'upload'
        xhr.onload = function () {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText); // 解析响应
                var fileName = response.fileName; // 获取新的文件名
                var imagePath = "/images/" + fileName; // 构建图片路径
                alert('上传成功: ' + fileName);
                sendMessageWithImage(imagePath); // 发送图片消息
            } else {
                alert('上传失败');
            }
        };
        xhr.send(formData);
    } else {
        imagePath = "/images/" + file.name;
        if (imagePath) {
            sendMessageWithImage(imagePath); // 发送之前上传成功的图片消息
        } else {
            alert('请先上传图片');
        }
    }
}

// 发送带图片的消息
function sendMessageWithImage(imagePath) {
    ws.send(JSON.stringify({sender: sender, receiver: receiver, data: [imagePath]})); // 发送图片消息
    displayImageMessage({sender: sender, receiver: receiver, data: [imagePath]}); // 显示图片消息
}

// 显示文本消息
// 显示文本消息
function displayTextMessage(message) {
    var messagesContainer = document.getElementById("chat-messages");
    var msgDiv = document.createElement("div");
    var userClass = message.sender === sender ? "my" : "other";
    msgDiv.className = userClass + "-message";

    let newclass = (message.sender == 101 ? 'message-text-w' : 'message-text-gy');

    msgDiv.innerHTML = "<span id='wrnm' class='username " + userClass + "-username'>" +
        (message.sender == 101 ? '👩‍💼' : '👨‍💼') +
        "</span><span class='message-text " + newclass + " " + userClass + "-message-text'>" +
        message.message_content + "</span>";

    messagesContainer.appendChild(msgDiv); // 将消息添加到消息容器
    messagesContainer.scrollTop = messagesContainer.scrollHeight; // 滚动到底部
}

// 显示图片消息
function displayImageMessage(message) {
    var messagesContainer = document.getElementById("chat-messages");
    var msgDiv = document.createElement("div");
    var userClass = message.sender === sender ? "my" : "other";
    msgDiv.className = userClass + "-message";

    message.data.forEach(image => {
        if (isImageOfType(image, ['png', 'jpg', 'jpeg'])) {
            var usernameSpan = document.createElement("span");
            usernameSpan.className = 'username ' + userClass + '-username';
            usernameSpan.innerText = (message.sender == 101 ? '👩‍💼' : '👨‍💼');

            var imgElement = document.createElement("img");
            imgElement.src = image; // 设置图片路径
            msgDiv.classList.add('image-message');
            if (message.sender === sender) {
                msgDiv.classList.add('my-image-message');
            } else {
                msgDiv.classList.add('other-image-message');
            }

            msgDiv.appendChild(usernameSpan);
            msgDiv.appendChild(imgElement);
        }
    });

    messagesContainer.appendChild(msgDiv); // 将消息添加到消息容器
    messagesContainer.scrollTop = messagesContainer.scrollHeight; // 滚动到底部
}

// 检查图片文件类型
function isImageOfType(imageName, types) {
    const regex = new RegExp(`\\.(${types.join('|')})$`, 'i');
    return regex.test(imageName);
}

// 页面加载完成后执行以下操作
window.onload = function () {
    connect(); // 连接WebSocket服务器
    document.getElementById("message-input").focus(); // 让消息输入框获取焦点
};
